<template>
    <up-popup
        :show="modelValue"
        @close="emit('update:modelValue', false)"
        :closeable="true"
        round="30rpx"
        :z-index="900"
    >
        <view>
            <view class="pb-40 pl-30 pr-30">
                <view class="ft-36 t-3 center bold pt-24 pb-24">费用明细</view>
                <scroll-view class="main" :scroll-y="true">
                    <view
                        class="space-between align-center ft-26 t-6 mt-10"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <view>
                            {{ dateFormat(item.stayDate) }}
                            {{
                                index === 0 || !orderDet.breakfastCount
                                    ? '无早餐'
                                    : `${orderDet.breakfastCount}份早餐/间`
                            }}
                        </view>
                        <view>
                            <text>{{ orderDet.roomCount || 1 }} x </text>￥{{ item.sellPrice }}
                        </view>
                    </view>
                    <view class="space-between align-center ft-26 t-6 mt-10">
                        <view>
                            {{ dateFormat(orderDet.checkOutDate) }}
                            {{
                                !orderDet.breakfastCount
                                    ? '无早餐'
                                    : `${orderDet.breakfastCount}份早餐/间`
                            }}
                        </view>
                        <view>
                            <text>离店日期</text>
                        </view>
                    </view>
                </scroll-view>
                <view class="text-right mt-20 popup-bot pt-20 ft-36 bold pb-40">
                    <view class="c-m">总计：￥{{ orderDet.totalAmount || '-' }}</view>
                </view>
            </view>
            <HjSafeFooter />
        </view>
    </up-popup>
</template>

<script setup>
/**
 * @description 消费明细
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'AmountDetails'
})
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    orderDet: {
        type: Object,
        default: () => {}
    }
})

const emit = defineEmits(['update:modelValue'])

const list = computed(() => {
    return props.orderDet?.orderDetailRespList || []
})
const dateFormat = date => {
    if (!date) {
        return ''
    }
    try {
        return dayjs(date).format('MM月DD日')
    } catch (error) {
        return ''
    }
}
</script>

<style scoped lang="scss">
.main {
    max-height: 510rpx;
}
.popup-bot {
    border-top: 1px solid #e1e1e1;
}
</style>
